<template>
    <el-dialog v-model="dialogVisible" title="批量导入敏感词" width="600px">
        <el-form :model="form" label-width="120px" ref="formRef" :rules="formRules">
            <el-form-item label="分类" prop="category">
                <el-select v-model="form.category" placeholder="请选择敏感词分类">
                    <el-option label="自定义词库" value="custom" />
                    <el-option label="政治敏感" value="politics" />
                    <el-option label="色情低俗" value="porn" />
                    <el-option label="广告推销" value="spam" />
                </el-select>
            </el-form-item>

            <el-form-item label="匹配方式" prop="matchType">
                <el-radio-group v-model="form.matchType">
                    <el-radio label="exact">精确匹配</el-radio>
                    <el-radio label="fuzzy">模糊匹配</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="敏感词列表" prop="content">
                <el-input v-model="form.content" type="textarea" :rows="10" placeholder="请输入敏感词列表，每行一个词" />
                <div class="form-help">每行输入一个敏感词，最多支持导入1000个</div>
            </el-form-item>

            <el-form-item>
                <el-button @click="parseFromClipboard">从剪贴板粘贴</el-button>
                <el-button @click="handleClear">清空</el-button>
            </el-form-item>

            <el-form-item label="预览" v-if="wordPreview.length > 0">
                <div class="word-preview">
                    <el-tag v-for="(word, index) in wordPreview" :key="index" size="small" class="word-tag">
                        {{ word }}
                    </el-tag>
                </div>
                <div class="preview-info">共 {{ wordCount }} 个敏感词</div>
            </el-form-item>
        </el-form>

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="handleCancel">取消</el-button>
                <el-button type="primary" @click="handleSubmit" :loading="loading">
                    导入
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script>
import { ref, reactive, computed, watch } from 'vue'
import { ElMessage } from 'element-plus'

export default {
    name: 'BatchImportDialog',
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        groupId: {
            type: String,
            required: true
        }
    },
    emits: ['update:visible', 'import-success'],
    setup(props, { emit }) {
        const formRef = ref(null)
        const loading = ref(false)

        const form = reactive({
            category: 'custom',
            matchType: 'exact',
            content: ''
        })

        const formRules = {
            category: [
                { required: true, message: '请选择分类', trigger: 'change' }
            ],
            matchType: [
                { required: true, message: '请选择匹配方式', trigger: 'change' }
            ],
            content: [
                { required: true, message: '请输入敏感词列表', trigger: 'blur' }
            ]
        }

        // 计算预览词
        const wordPreview = computed(() => {
            if (!form.content) return []
            const words = form.content.trim().split('\n').filter(w => w.trim() !== '')
            return words.slice(0, 20) // 只显示前20个作为预览
        })

        // 计算总词数
        const wordCount = computed(() => {
            if (!form.content) return 0
            return form.content.trim().split('\n').filter(w => w.trim() !== '').length
        })

        // 对话框显示状态
        const dialogVisible = computed({
            get: () => props.visible,
            set: (val) => emit('update:visible', val)
        })

        // 从剪贴板粘贴
        const parseFromClipboard = async () => {
            try {
                const text = await navigator.clipboard.readText()
                form.content = text
            } catch (err) {
                ElMessage.error('无法访问剪贴板，请手动粘贴内容')
            }
        }

        // 清空内容
        const handleClear = () => {
            form.content = ''
        }

        // 取消导入
        const handleCancel = () => {
            dialogVisible.value = false
            form.content = ''
            form.category = 'custom'
            form.matchType = 'exact'
        }

        // 提交导入
        const handleSubmit = () => {
            formRef.value.validate((valid) => {
                if (valid) {
                    const words = form.content.trim().split('\n')
                        .filter(word => word.trim() !== '')
                        .map(word => word.trim())

                    if (words.length === 0) {
                        ElMessage.warning('敏感词列表不能为空')
                        return
                    }

                    if (words.length > 1000) {
                        ElMessage.warning('一次最多只能导入1000个敏感词')
                        return
                    }

                    emit('import-success', {
                        words,
                        category: form.category,
                        matchType: form.matchType,
                        groupId: props.groupId
                    })

                    handleCancel()
                }
            })
        }

        return {
            formRef,
            form,
            formRules,
            loading,
            wordPreview,
            wordCount,
            dialogVisible,
            parseFromClipboard,
            handleClear,
            handleCancel,
            handleSubmit
        }
    }
}
</script>

<style scoped>
.form-help {
    font-size: 12px;
    color: #909399;
    margin-top: 5px;
}

.word-preview {
    max-height: 150px;
    overflow-y: auto;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    padding: 10px;
}

.word-tag {
    margin-right: 5px;
    margin-bottom: 5px;
}

.preview-info {
    font-size: 12px;
    color: #409eff;
    margin-top: 5px;
}
</style>